<template>
  <div class="tab">
    <template v-for="(item, index) in data">
      <div
        v-if="item instanceof Object"
        :style="styleVal"
        :key="item[valueKey]"
        :class="{
          'tab-item': true,
          active: modelValue === item[valueKey],
          'fill-tab': fill,
          disabled: item[disabledKey]
        }"
        @click="handleClick(item[valueKey], item, index)"
      >
        <slot v-if="item.slot" :name="item.slot" v-bind="{ row: item, index }"></slot>
        <el-badge v-else :value="item[numberKey]" class="item">
          {{ item[labelKey] }}
        </el-badge>
        <ribbon v-if="item.ribbonValue" :ribbonStyle="item.ribbonStyle">{{
          item.ribbonValue
        }}</ribbon>
      </div>
      <div
        v-else
        :key="index"
        :class="{ 'tab-item': true, active: value === index }"
        @click="handleClick(index, item, index)"
      >
        {{ item }}
      </div>
    </template>
  </div>
</template>
<script setup>
import ribbon from './ribbon.vue'
import { computed } from 'vue'
const emits = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  modelValue: [String, Number],
  valueKey: {
    type: String,
    default: 'value'
  },
  labelKey: {
    type: String,
    default: 'label'
  },
  disabledKey: {
    type: String,
    default: 'disabled'
  },
  numberKey: {
    type: String,
    default: 'number'
  },
  fill: {
    type: Boolean,
    default: true
  },
  height: {
    type: [String, Number],
    default: ''
  }
})

const handleClick = (key, item, index) => {
  if (item[props.disabledKey]) {
    return
  }
  if (key !== props.modelValue) {
    emits('update:modelValue', key)
    emits('change', key, item, index)
  }
}

const styleVal = computed(() => {
  if (!props.height) {
    return
  }
  if (typeof props.height === 'number') {
    return `height:${props.height}px`
  } else {
    return `height:${props.height}`
  }
})
</script>

<style scoped>
.tab {
  display: flex;
  width: 100%;
  background: var(--dialog-header-bg, #f7f7f7);
  color: var(--text-common, #333);
}

.tab-item {
  position: relative;
  padding: 5px 15px;
  min-height: 50px;
  min-width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0 60px;
  overflow: hidden;
  transition: 0.6s;
}
.fill-tab {
  flex-grow: 1;
}
:deep(.el-badge__content.is-fixed) {
  right: 5px;
  z-index: 1;
}
.disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  filter: grayscale(1) !important;
}
.tab-item.active {
  border-bottom-color: transparent;
  background-color: var(--tabs-active-bg, #fff);
  color: var(--tabs-active-text, #409eff);
  font-weight: bold;
}
/* .tab-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #409eff;
  font-weight: bold;
} */
</style>
